<template>
  <div class="newsDetail">
    <div id="bdtts_div_id"></div>
    <div class="title">{{ title }}</div>
    <div class="tips">
      <p>{{ fbr }}</p>
      <!-- <p>{{ date }}</p> -->
      <p>{{ time }}</p>
      <p v-show="count">{{ count }}阅读量</p>
    </div>
    <div class="imgbox" v-if="src">
      <img :src="src" alt="图片加载失败" />
    </div>
    <div class="content" v-html="content"></div>
    <div class="speaker" v-if="content" @click="speaker(content)">
        <van-icon name="volume"/>
    </div>
    <br />
    <div class="base">撰稿人：{{base}}</div>

    <div id="bdtts_div_id">
      <audio id="tts_autio_id" autoplay="autoplay">
        <source id="tts_source_id" :src="ttsText" type="audio/mpeg">
        <embed id="tts_embed_id" height="0" width="0" src="">
      </audio>
    </div>

  </div>
</template>

<script>
import * as api from '../assets/js/api';
export default {
  data() {
    return {
      ttsText: '',
      title: '',
      base: '',
      date: '',
      time: '',
      count: 0,
      fbr: '',
      src: '',
      content: ''
    };
  },
  mounted() {
    document.title = this.$route.query.title || '详情';
    const method = this.$route.query.method || 'jbxx1querydata4object';
    if (!method) { return; }
    this[method](this.$route.query.id).then(({data}) => {
      let dt = data[0];
      this.title = dt.title;
      this.time = dt.createTime;
      this.base = dt.zgr;
      this.content = dt.nr;
      this.count = dt.ydl;
      this.src = dt.lpt;
      this.fbr = dt.fbr;
      if (this.$route.query.images) {
        this.src = this.$route.query.images;
      }
    });
  },
  methods: {
    ...api,
    speaker(ttsText) {
      let k = ttsText.indexOf('<table'),
        j = ttsText.indexOf('</table>') + 8;
      ttsText = ttsText.replace(ttsText.substring(k, j), '');
      ttsText = ttsText.replace(/<.*?>/ig, '');
      ttsText = ttsText.replace(/#/ig, '');
      let ttsAudio = document.getElementById('tts_autio_id');
      this.ttsText = '/jggb_web_wx/jbxx1/tospeech4object.mvc?text=' + ttsText + '&_t=' + new Date().getTime();
      this.$nextTick(res => {
        ttsAudio.load();
        ttsAudio.play();
      });
    }
  }
};
</script>

<style>
  .content th, .content td, .content table {
    border: 1px solid #000;
  }
  .content a,
  .content a span,
  .content a p,
  .content a div {
    color: blue !important;
  }
  .content h1 {
    font-size: 2em;
  }
  .content h2 {
    font-size: 1.5em;
  }
</style>
<style lang="less" scoped>
.newsDetail {
  position: relative;
  background: #ffffff;
  padding: 35px 24px 35px 22px;
  min-height: 100%;
  box-sizing: border-box;
  .title {
    width: 657px;
    font-size: 40px;
    font-weight: bold;
    color: #353535;
  }
  .tips {
    display: flex;
    font-size: 26px;
    color: #888888;
    margin: 27px 0 22px 0;
    p {
      margin-right: 15px;
      &:first-child {
        color: #39558e;
      }
    }
  }
  .imgbox {
    width: 696px;
    // height: 277px;
    margin: 0 auto;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  .content {
    margin-top: 25px;
    color: #4c4c4c;
    font-size: 32px;
    line-height: 52px;
  }

  .speaker{
      position: fixed;
      z-index: 99;
      right: 20px;
      top: 200px;
      font-size: 50px;
      line-height: 90px;
      height: 90px;
      width: 90px;
      text-align: center;
      box-sizing: border-box;
      padding-top: 8px;
      color: #fff;
      background: #3198ed;
      border-radius: 50%;
  }
  .base {
    font-size: 28px;
  }
}
</style>
